<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<script src="../../js/lib/jquery-v3.0.0/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/lib/jquery-sammy-v0.7.6/sammy.js" type="text/javascript" charset="utf-8"></script>
		<title>jquery.sammy</title>
	</head>

	<body>
		<script type="text/javascript">
			var layer1 = function(app) {
				this.helpers({
					alert1: function(message) {
						this.log("ALERT! " + message);
					}
				});
			};
			var layer2 = function(app, prefix, suffix) {
				this.helpers({
					alert2: function(message) {
						this.log(prefix, message, suffix);
					}
				});

			};

			var app = $.sammy(function() {
				this.use(layer1);
				this.use(layer2, 'BEFORE!', 'AFTER!');
				this.get('#/', function() {
					this.alert1("I'm home"); //=> logs: ALERT! I'm home
					this.alert2("I'm home"); //=> logs: BEFORE! I'm home AFTER!
				});
			}).run('#/');
		</script>
	</body>

</html>